<template>
	<view>
		<view class="imgAndVBox">
			<view class="positionQh flex" v-if="shopDetali.video">
				<view class="w-120 textC h-50 lh-50" @click="lookType='img'" :class="lookType=='img'?'active':''">图片</view>
				<view class="w-120 textC h-50 lh-50" @click="lookType='vio'" :class="lookType=='vio'?'active':''">视频</view>
			</view>
			<block v-if="lookType=='img'">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,i) in imgReturn(shopDetali.images)">
						<image :src="$util.img(item)" mode=""></image>
					</swiper-item>
				</swiper>
			</block>
			<block v-if="lookType=='vio'">
				<video :src="$util.img(shopDetali.video)"></video>
			</block>
		</view>

		<!-- 第一模块 -->
		<view class="modelBox">
			<view class="flex_b">
				<view class="font-36 font-weight">{{shopDetali.stash_name||'未命名'}}</view>
				<!-- <view class="">收藏</view> -->
			</view>
			<view class="flex m-t-14">
				<view v-for="(item,index) in labelReturn(shopDetali.label)" :key="index" class="font-20 biaoqian">{{item}}</view>
			</view>
			<view class="flex_b m-t-18">
				<view class="">
					<view class="textC font-36 f-t font-weight">{{shopDetali.area||0}}m²</view>
					<view class="textC font-24 grey">面积</view>
				</view>
				<view class="">
					<view class="textC font-36 f-t font-weight">{{shopDetali.price||0}}元/月</view>
					<view class="textC font-24 grey">月租</view>
				</view>
				<view class="">
					<view class="textC font-36 f-t font-weight">{{shopDetali.city||''}}{{shopDetali.district||''}}</view>
					<view class="textC font-24 grey">{{shopDetali.address||''}}</view>
					<!-- {{shopDetali.address||'未设置'}} -->
				</view>
			</view>
		</view>

		<view class="modelBox">
			<view class="flex m-b-14">
				<view class="font-28 grey w-136">位置</view>
				<view class="font-28">{{shopDetali.city||''}}-{{shopDetali.district||'暂无数据'}}</view>
			</view>
			<view class="flex m-b-14">
			<view class="flex" style="width: 50%;">
				<view class="font-28 grey w-136">类型</view>
				<view class="font-28">{{shopDetali.type=='0'?'出租':shopDetali.type==1?'转让':'暂无数据'}}</view>
			</view><view class="flex">
				<view class="font-28 grey w-136">可否环评</view>
				<view class="font-28">{{shopDetali.is_hp=='0'?'否':shopDetali.is_hp==1?'是':'暂无数据'}}</view>
			</view>
			</view>
			
			<view class="flex m-b-14">
				<view class="flex" style="width: 50%;">
					<view class="font-28 grey w-136">押付</view>
					<view class="font-28">{{shopDetali.pay_security||'暂无数据'}}</view>
				</view>
				<view class="flex">
					<view class="font-28 grey w-136">起租期</view>
					<view class="font-28">{{shopDetali.on_hire_time||'暂无数据'}}</view>
				</view>
			</view>

			<view class="flex m-b-14">
				<view class="flex" style="width: 50%;">
					<view class="font-28 grey w-136">租赁方式</view>
					<view class="font-28">{{shopDetali.lease_type||'暂无数据'}}</view>
				</view>
				<view class="flex" style="width: 50%;">
					<view class="font-28 grey w-136">楼层</view>
					<view class="font-28">{{shopDetali.floor||'暂无数据'}}</view>
				</view>

			</view>

			<view class="flex m-b-14">
				<view class="flex" style="width: 50%;">
					<view class="font-28 grey w-136">首层层高</view>
					<view class="font-28">{{shopDetali.first_floor_height||'暂无数据'}}</view>
				</view>
				<view class="flex">
					<view class="font-28 grey w-136">厂房新旧</view>
					<view class="font-28">{{shopDetali.old_new||'暂无数据'}}</view>
				</view>
			</view>

			<view class="flex m-b-14">
				<view class="font-28 grey w-136">厂房结构</view>
				<view class="font-28">{{shopDetali.structure||'暂无数据'}}</view>
			</view>

			<view class="flex">
				<view class="font-28 grey w-136">厂房特色</view>
				<view class="font-28">{{shopDetali.feature||'暂无数据'}}</view>
			</view>

		</view>

		<view class="modelBox">
			<view class="font-34 font-weight ">店铺详情</view>
			<uv-read-more show-height="150rpx" :toggle="true" ref="readMore">
				<rich-text :nodes="formatImg(introduce)" @ready="ready"></rich-text>
			</uv-read-more>
		</view>

		<view class="modelBox">
			<view class="font-34 font-weight m-b-20">位置及配套设施</view>
			<view class="mapSty">
				<map name="map" class="mapSty" @tap="mapDetali" @anchorpointtap="mapDetali" @callouttap="mapDetali" :markers="markers" :latitude="shopDetali.latitude" :longitude="shopDetali.longitude"></map>
			</view>
			<uv-tabs :list="listA" lineColor="rgba(0,0,0,0)" @change="changeZb" :inactiveStyle="{
				width: '108rpx',
				height: '54rpx',
				background: '#f5f5f5',
				borderRadius: '50rpx',
				lineHeight: '54rpx',
				textAlign:'center'
			}" :activeStyle="{
				borderRadius: '50rpx',
				lineHeight: '54rpx',
				textAlign:'center',
				width: '108rpx',
				height: '54rpx',
				color: '#e5632b',
				fontWeight: 'bold',
				background: '#ffebe8',
			}"></uv-tabs>
			<view class="">
				<view v-for="(item,index) in ZhouBianList" :key="index" class="zhoubianItem"  
					@click="$util.mapNavigate(item.location.lat,item.location.lng,item.title)">
					<view class="zhoubianA">
						<!-- <image src="/static/logo.png" mode=""></image> -->
						<view class="iconfont icon-weizhi1"></view>
						<view class="zhoubianTit">{{item.title}}</view>
					</view>
					<!-- <view class="zhoubianB">
						直线{{item._distance>1000?(item._distance/1000).toFixed(2)+"km":item._distance+"m"}} </view> -->
				</view>
			</view>
		</view>
		<view class="bottom-mar" style="height: 100rpx;"></view>
		<!-- 案例详情  -->
		
		<view class="bomPosition" v-if="type=='anLi'" >
			<view class="flex_b">
			<view class="flex_c textC m-r-16 w-100">
				<view class="iconfont icon-shoucang" style="font-size: 32rpx;"></view>
				<!-- <view class="iconfont icon-shoucang1 f-t" style="font-size: 32rpx;"></view> -->
				<!-- <view class="">收藏</view> -->
			</view>
			<button>微信联系</button>
			</view>
			<view class="h-10"></view>
		</view>
		<!-- 仓库 type=='cangku'--> 
		<view class="bomPosition" v-if="false" >
			<view class="flex_b">
			<!-- <view class="flex_c textC m-r-16 w-200">
				<view class="iconfont icon-shoucang" style="font-size: 32rpx;"></view>
				<view class="iconfont icon-shoucang1 f-t" style="font-size: 32rpx;"></view>
				<view class="">收藏</view>
			</view> -->
			<button class="m-r-30" open-type="contact" style="background-color: #f8dcd1;color: #000;">在线咨询</button>
			<button @click="$util.plone(shopDetali.mobile)">电话咨询</button>
			<!-- <button @click="yuYueFn">预约看房</button> -->
			</view>
			<view class="h-10"></view>
		</view>
		<!-- 普通底部 -->
		<view class="bomPosition " v-else>
			<view class="flex_b">
			<view class="flex">
				<image :src="$util.img(shopDetali.avatar)" v-if="shopDetali.avatar" mode="" class="w-64 h-64 bor-32"></image>
				<image src="/static/userNone.png" v-else mode="" class="w-64 h-64 bor-32"></image>
				<view class="m-l-20">
					<view class="font-28">{{shopDetali.realname||'微信用户'}}</view>
					<view class="font-18 grey" v-if="shopDetali.type_text">{{shopDetali.type_text||''}}</view>
				</view>
			</view>
				<view class="flex">
					<view class="flex_c textC m-r-16" @click="yuYueFn">
						<view class="iconfont icon-yuyue f-t" style="font-size: 32rpx;"></view>
						<view class="">约看</view>
					</view>
					<button class="flex_c textC bomBtnR m-r-16" open-type="contact">
						<view class="iconfont icon-a-1 white" style="font-size: 32rpx;"></view>
						<view class="white">在线问</view>
					</button>
					<view class="flex_c textC bomBtnR m-r-16" style="background-color: #e5632b;" @click="$util.plone(shopDetali.mobile)">
						<view class="iconfont icon-dianhua white" style="font-size: 32rpx;"></view>
						<view class="white">打电话</view>
					</view>
				</view>
				</view>
				<view class="h-10"></view>
		</view>	
				<!-- 预约看房 -->
				<uv-popup ref="popup" round="8" :safeAreaInsetBottom="false" :closeable="true">
					<view class="yuYue flex_c">
						<view class="textC font-32 font-weight">预约看房</view>
						<input type="tel" placeholder="请输入手机号" maxlength="11">
						<button type="primary" @click="submitPlone">提交</button>
					</view>
				</uv-popup>
				
				<uv-popup ref="popupPLone" round="8" :safeAreaInsetBottom="false" :closeable="true">
					<view class="payBox">
						<view class="font-36 font-weight">支付金额(元)</view>
						<view class="font-60 font-weight f-t m-t-40">199元</view>
						<view class="m-b-30 m-t-30" style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
						<button type="primary" @click="submitPlone">支付定金</button>
						<view class="flex m-t-30">
							<view class="iconfont icon-weixuanzhong" style="font-size: 40rpx;"></view>
							<!-- <view class="iconfont icon-choose f-t" style="font-size: 40rpx;"></view> -->
							<view class="">我已阅读并同意<text style="color: #385373;">《支付协议》</text></view>
						</view>
					</view>
				</uv-popup>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				introduce:'',
				lookType:'img',
				shopDetali:{},
				markers:[
					
				],
				latitude:39.90,
				longitude: 116.39,
				map:{
					lat:39.90,
					lng:116.39
				},
				ZhouBianList: [],
				listA: [{
						name: '交通',
					},
					{
						name: '商场',
					},
					{
						name: '学校'
					},
					{
						name: '医院'
					}, 
					{
						name: '银行'
					}
				],
				type:''
			};
		},
		ready() {
			// 由于图片较多，可以再适当的给一个延迟
			setTimeout(() => {
				this.$refs.readMore.init();
			}, 1000)
		},
		onLoad(res) {
			if(res.type) {
				this.type = res.type
			}
			if(res.id) {
				this.getShopDetali(res.id)
			}
			
		},
		methods: {
			mapDetali(e) {
				this.$util.mapNavigate(this.shopDetali.latitude,this.shopDetali.longitude,this.shopDetali.address)
			},
			formatImg(html) {
				console.log(html,'+++++----000');
				var newContent = html.replace(/<img[^>]*>/gi, (match) => {
					let processed = null;
					if (!match.match(/style=\"(.*)\"/gi)) {
						processed = match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
					} else {
						processed = match.replace(/style=\"(.*)\"/gi,
							'style="width:100%;height:auto;display:block"');
					}
					return processed;
				});
				return newContent;
			},
			imgReturn(img) {
				if(img) {
					return img.split(',')
				}else {
					return ''
				}
			},
			labelReturn(label) {
				if(label) {
					return label.split(',')
				}else {
					return []
				}
			},
			// 获取商铺详情
			getShopDetali(id) {
				this.$api.sendRequest({
					url:'/api/stash/detail',
					data:{
						id:id
					},success:res=>{
						this.shopDetali = res.data
						
						this.getZhouBian('交通')
						this.markers[0] = {
						id: res.data.id,
						latitude: res.data.latitude,
						longitude: res.data.longitude,
						iconPath: '',
						title: res.data.address,
						width: '4rpx',
						height: '2rpx',
						display: 'ALWAYS',
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: res.data.address, //文本
							color: '#000', //文字颜色
							fontSize: 15, //文本大小
							borderRadius: 5, //边框圆角
							padding: '10rpx',
							bgColor: '#ffffff', //背景颜色
							display: 'ALWAYS', //常显
						},
					}
					
					this.introduce = res.data.introduce
					this.$nextTick(() => {
						this.$refs.readMore.init();
					})
					}
				})
			},
			submitPlone() {
				// 提交手机号
				this.$refs.popup.close();
				this.$refs.popupPLone.open('center');
			},
			// 预约看房
			yuYueFn() {
				this.$refs.popup.open('center');
			},
			changeZb(e) {
				// 切换周边
				this.type = e.name
				this.getZhouBian(e.name)
			},
			getZhouBian(type) {
				uni.request({
					url: `https://apis.map.qq.com/ws/place/v1/search?key=M6JBZ-2OHKN-B5SFY-S6J2S-X33BE-5DFCI&keyword=${type}&boundary=nearby(${this.shopDetali.latitude},${this.shopDetali.longitude},1000,1)`,
					success: res => {
						this.ZhouBianList = res.data.data
					},
					fail(err) {
						console.log(err, '======');
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.active {
		background-color: #e5632b !important;
		border-radius: 20rpx;
		color: #fff;
	}
	.payBox {
		width: 514rpx;
		height: 370rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding:30rpx 25rpx;
	}
	.yuYue {
		width: 514rpx;
		height: 270rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding:30rpx 25rpx;
		input {
			width: 476rpx;
			height: 56rpx;
			opacity: 1;
			border-radius: 8rpx;
			background: rgba(241, 244, 248, 1);
			padding: 20rpx;
		}
	}
	.bomBtnR {
		width: 176rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 50rpx;
		background: rgba(59, 196, 140, 1);
	}
	.mapSty {
		width: 100%;
		height: 260rpx;
		border-radius: 50rpx;
	}
	.zhoubianItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25rpx;
		padding: 10rpx 0;
	}
	.zhoubianB {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 30rpx;
		color: #999999;
	}

	.zhoubianTit {
		white-space: nowrap;
		/* 第二步：溢出隐藏 */
		overflow: hidden;
		/* 第三步：溢出的内容省略号显示 */
		text-overflow: ellipsis;
		width: 440rpx;
	}

	.zhoubianA {
		display: flex;
		align-items: center;

		// image {
		// 	width: 34rpx;
		// 	height: 34rpx;
		// 	margin-right: 10rpx;
		// }

		view {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 30rpx;
			color: #333333;
		}
	}

	.sheshiList {
		margin-top: 25rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.sheshiItem {
		width: 20%;
		text-align: center;
		margin-bottom: 20rpx;

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	page {
		background-color: #f5f6f7;
	}

	.biaoqian {
		background-color: #eef1f4;
		border-radius: 4rpx;
		margin-right: 10rpx;
		padding: 2rpx 6rpx;
		color: #58352b;
	}
	.imgAndVBox {
		width: 750rpx;
		height: 608rpx;
		position: relative;
		.positionQh {
			border-radius: 20rpx;
			z-index: 9999999;
			width: 240rpx;
			background-color: #eef1f4;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -120rpx;
		}
	}
	swiper {
		width: 750rpx;
		height: 608rpx;

		swiper-item {
			width: 750rpx;
			height: 608rpx;

			image {
				width: 750rpx;
				height: 608rpx;
			}
		}
	}
	video {
		width: 750rpx;
		height: 608rpx;
	}
</style>
